<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        #box1{
            width: 100px;
            height: 100px;
            margin: 50px;
            background-color: orange;
            padding: 20px;
            border: 10px red solid;
            overflow: auto;
        }

        #box2{
            width: 350px;
            height: 500px;
            background-color: yellow;
        }

    </style>

    <script>
        window.onload = function () {

            var box1 = document.getElementById('box1');
            var btn01 = document.getElementById('btn01');
            btn01.onclick = function () {

                // 盒子的内部大小
                // clientWidth 元素宽度（内容区+内边距）
                // clientHeight 元素高度（内容区+内边距）
                // 这两个属性返回的值就是数字可以直接用来计算

                // 盒子的整个大小
                // offsetWidth 获取元素的宽度（内容区+内边距+边框）
                // offsetHeight 获取元素的高度（内容区+内边距+边框）
                // alert(box1.clientWidth);

                /*
                    offsetParent 获取元素的定位父元素
                        - 获取离当前元素最近的开启了定位的祖先元素
                            如果所有的祖先元素都没有开启定位则返回body
                    offsetLeft 获取当前元素距离定位元素的左侧偏移量
                    offsetTop 当前元素距离定位元素上侧的距离

                 */
               // alert(box1.offsetParent);

                // alert(box1.offsetLeft);
                // alert(box1.offsetTop);

                // scrollHeight 用来获取元素滚动区域的高度
                // scrollWidth 用来获取滚动区域的宽度
                // alert(box1.scrollWidth);

                // 这两个值可以修改，以改变滚动条的位置
                // scrollTop 垂直滚动条的位移
                // scrollLeft 水平滚动条的位移
                // 当元素的scrollHeight减去scrollTop等于元素clientHeight时，说明垂直滚动条已经滚动到底了
                alert(box1.scrollHeight - box1.scrollTop === box1.clientHeight);
                // alert(box1.clientHeight);
                // box1.scrollLeft = 25;

            };

        };

    </script>
</head>
<body>
<button id="btn01">点我一下</button>
<div id="box3" style="position:relative; border: 5px black dotted;">
    <div id="box1">

        <div id="box2"></div>

    </div>
</div>


</body>
</html>